<template>
  <div class="month-picker" style="width: 95%">
    <div class="month-input">
      <i class="iconfont icon-sousuo"></i>
      <span>
        {{ this.year + '年' + this.month + '月' }}
      </span>
      <button class="search" @click.stop="mCheck()">
        <i class="iconfont icon icon-rili"></i>
      </button>
    </div>
    <transition>
      <div class="month-pick" v-show="check">
        <div class="month-header">
          <i class="iconfont icon-arrow-left-bold" @click.stop="reduceYear"></i>
          <span class="month"> {{ selectedYear }}年 </span>
          <i class="iconfont icon-arrow-right-bold" @click.stop="addYear"></i>
        </div>
        <div class="month-body">
          <ul>
            <li v-for="item in list1" :key="item.v" @click="changeMonth(item)">{{ item.id }}</li>
          </ul>
          <ul>
            <li v-for="item in list2" :key="item.v" @click="changeMonth(item)">{{ item.id }}</li>

          </ul>
          <ul>
            <li v-for="item in list3" :key="item.v" @click="changeMonth(item)">{{ item.id }}</li>
          </ul>
          <ul>
            <li v-for="item in list4" :key="item.v" @click="changeMonth(item)">{{ item.id }}</li>
          </ul>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import '../assets/font/iconfont.css';
export default {
  name: 'month-picker',
  mounted() {
    // this.selectedTime = new Date()
    //   this.selectedTime.setFullYear(this.$store.year)
    //   this.selectedTime.setMonth(this.$store.month)
    //   this.time.year = this.$store.year
    //   this.selectedYear = this.$store.year
    //   this.time.month = this.$store.month

    // 模拟外部点击
    document.addEventListener('click', (e) => {
      if (e.target.className !== 'month-pick') {
        this.check = false
      }
    })
  },
  destroyed() {
    window.removeEventListener('click', () => { }, true)
  },

  methods: {
    mCheck() {
      this.check = true
      this.selectedYear = this.year
    },
    changeMonth(item) {
      this.$store.year = this.selectedYear
      this.$store.month = item.v
      this.$store.time = {
        year: this.selectedYear,
        month: item.v
      }
      // 关闭弹窗
      this.check = false
    },
    reduceYear() {
      this.selectedYear -= 1
    },
    addYear() {
      this.selectedYear += 1
    }
  },
  computed: {
    year() {
      return this.$store.year
    },
    month() {
      return this.$store.month
    }
  },
  data() {
    return {
      check: false,
      selectedYear: null,
      time: {
        year: null,
        month: null
      },
      list1: [{ id: '三月', v: 3 }, { id: '二月', v: 2 }, { id: '一月', v: 1 }],
      list2: [{ id: '六月', v: 6 }, { id: '五月', v: 5 }, { id: '四月', v: 4 }],
      list3: [{ id: '九月', v: 9 }, { id: '八月', v: 8 }, { id: '七月', v: 7 }],
      list4: [{ id: '十二月', v: 12 }, { id: '十一月', v: 11 }, { id: '十月', v: 10 }],
    }

  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  z-index: 100;
  margin: 0;
  padding: 0;
  transform: translateX(-1px);
}

.month-picker {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 10px;
  left: 50%;
  transform: translate(-160px);
}

.month-picker .month-input {
  width: 100%;
  border-radius: 5px;
  height: 40px;
  font-size: 16px;
  line-height: 36px;
  color: aliceblue;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, .2);
  background-color: rgba(9, 59, 148, .8);
  border: 2px solid rgb(34, 74, 198);
  user-select: none;
}

.icon-sousuo {
  margin-left: 5px;
  margin-right: 5px;
  font-size: 20px;
}

.month-picker .search {
  float: right;
  margin-right: -1px;
  height: 98%;
  width: 60px;
  border-radius: 5px;
  border: 0;
  text-align: center;
  cursor: pointer;
  background-color: rgb(24, 144, 255);
}

.month-picker .search:hover {
  background-color: rgb(20, 111, 196);
}

.icon-rili {
  font-size: 25px;
  line-height: 30px;
  color: aliceblue;
}

.month-picker .month-pick {
  overflow: hidden;
  position: absolute;
  top: 50px;
  width: 100%;
  border-radius: 5px;
  color: aliceblue;
  background-color: rgba(9, 59, 148, .8);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, .2);
  border: 2px solid rgb(34, 74, 198);
  backdrop-filter: blur(4px);
}


.month-picker .month-header {
  margin-top: 10px;
  width: 100%;
  font-size: 18px;
  line-height: 40px;
  display: flex;
  justify-content: space-around;
}

.icon-arrow-left-bold,
.icon-arrow-right-bold {
  font-size: 30px;
  cursor: pointer;
}

.icon-arrow-left-bold:hover,
.icon-arrow-right-bold:hover {
  transform: scale(1.2);
  transition: all .5s;
}

.month-body {
  margin-top: 10px;
  margin-right: -4px;
  height: 202px;
  text-align: center;
}

.month-body li {
  display: block;
  width: 33%;
  height: 50px;
  float: right;
  user-select: none;
  text-align: center;
  /* background-color: aqua; */
  align-items: center;
  line-height: 50px;
  cursor: pointer;
  font-size: 18px;
  border: 1px solid rgb(34, 74, 198);


  /* margin: 10px 0px; */
  /* text-indent:5px */
}

.month-body li:hover {
  background-color: rgba(9, 59, 148, 1);
  font-size: 20px;
}

.v-leave-active,
.v-enter-active {
  transition: opacity 0.5s ease;
}

.v-leave-to,
.v-enter-from {
  opacity: 0
}
</style>
